<template>
  <div class='app-container'>
    <div class="appout">
      <div class='util-tab'>
        <div class="titles">消息通知</div>
        <div class="pd20">
        <el-button @click="allChange"  size="small">全部标记为已读</el-button>
        </div>
        <el-table :data="list" v-loading="loading" style="width:100%" class='uti-table' stripe>
          <!--<el-table-column slot="empty">
	            <div class="nodata">
	              		暂无数据
	            </div>
	          </el-table-column>-->
          <el-table-column label="时间" prop="creationTime">
          </el-table-column>
          <el-table-column label="通知内容" prop="title">
            <template slot-scope="scope">
              <a class="links" :href="downurl+scope.row.linkSourse">{{scope.row.title}}</a>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="state" align='right' width="100">
            <template slot-scope='scope'>
              <a class="links" @click="changeRead(scope.row.id)" v-if="scope.row.state == 0">标记为已读</a>
              <span v-else>已读</span>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <div class='page-right'>
        <el-pagination @current-change="handleCurrentChange" :current-page='currentPage' background :page-size="10" layout="total,prev, pager, next" :total="totalCount" class='util-page' size='mini'></el-pagination>

      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1,
      currentPage: 1,
      totalCount: null,
      loading: false,
      downurl:process.env.BASE_DOWN
    };
  },
  created() {
    if (this.$route.query.page) {
      this.page = this.$route.query.page;
    }
  },
  watch: {
    $route(to, from) {
      this.page = this.$route.query.page;
      this.getList();
    }
  },
  mounted() {
    this.getList(); //获取列表信息
  },
  methods: {
    allChange() {
      //全部标记为已读
      const me = this;
      let params = {
        pageIndex: this.page
      };
      this.post(params, "services/app/notification/SetAllNotificationsAsRead").then(
        rs => {
          if (rs.success) {
            me.getList()
          } else {
            this.$notify.error({
              title: "错误",
              message: rs.error.message
            });
            this.loading = false;
          }
        }
      );
    },
    changeRead(id){
       //标记为已读
      const me = this;
      let params = {
       id:id
      };
      this.post(params, "services/app/notification/SetNotificationAsRead").then(
        rs => {
          if (rs.success) {
            me.getList()
            me.$store.dispatch("msgstate")
          } else {
            this.$notify.error({
              title: "错误",
              message: rs.error.message
            });
            this.loading = false;
          }
        });
    },
    getList() {
      this.loading = true;
      let params = {
        pageIndex: this.page
      };
      this.post(params, "services/app/notification/GetNotificationList").then(
        rs => {
          if (rs.success) {
            if (rs.result) {
              this.totalCount = rs.result.totalCount;
              this.list = rs.result.items;
              this.currentPage = this.page;
              this.loading = false;
            }
          } else {
            this.$notify.error({
              title: "错误",
              message: rs.error.message
            });
            this.loading = false;
          }
        }
      );
    },
    handleCurrentChange(val) {
      //this.fillDate(val)
      this.$router.push({
        name: "messagedetail",
        query: {
          page: val,
          time: new Date().getTime()
        }
      });
    }
  }
};
</script>

<style scoped>
.pd20{
  padding:20px 0;
}
.appout {
  padding: 30px 20px;
}
.titles {
  width: 100%;
  height: 50px;
  text-align: center;
  color: #ff7819;
  font-size: 20px;
}
.page-right {
  text-align: right;
  margin-top: 30px;
}
</style>